<template>
  <div>
    <div class="top">
      <div class="left">
        <van-icon name="arrow-left" color="white" @click="$router.go(-1)" />
      </div>
      <div class="search">
        <van-search v-model="value" placeholder="请输入搜索关键词">
          <template #left>
            <div
              @click="
                $router.push({
                  path: '/city',
                  query: { curr: curr, index: 'find' }
                })
              "
            >
              {{ curr }}
            </div>
          </template>
        </van-search>
      </div>
    </div>
    <van-nav-bar title="标题" left-arrow>
      <template #title>
        <van-search
          v-model="values"
          label="北京"
          placeholder="请输入小区或地址"
        >
        </van-search>
      </template>
      <template #right>
        <van-icon name="location-o" size="18" />
      </template>
    </van-nav-bar>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="item">
          <van-picker :columns="colu" />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item">
          <van-picker :columns="columns" />
          <!-- @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange" -->
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item"> </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <van-card
      @click="toDetail(item.houseCode)"
      v-for="item in info"
      :key="item.houseCode"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="danger">{{ item.tags[0] }}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  name: 'FindHome',
  data () {
    return {
      info: null,
      colu: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        },
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        }
      ],
      columns: ['不限', '整租', '合租']
    }
  },
  methods: {
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange (picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
    },
    toDetail (id) {
      this.$router.push({
        name: 'Fhdetail',
        query: { id }
      })
    }
  },
  async created () {
    const { data } = await axios({
      url: ' http://liufusong.top:8080/houses/'
    })
    this.info = data.body.list
    console.log(this.info)
  }
}
</script>
<style scoped></style>
